<template>
	<view>
		<view class="bg-white padding-bottom" :style="{'padding-top':CustomBar+'px'}"
			@click="$tools.push('/pages/plugins/search')">
			<view class="head_input margin-left align-center flex justify-center " :style="{'height':CustomBarH+'px'}">
				<image src="/static/home/icon_sysous.png" mode="" class="input_icon"></image>
				<input type="text" value="" placeholder="请输入搜索内容" placeholder-style="color:#9F9F9F" />
			</view>
		</view>
		<view class="margin-top  align-center bg-white " :style="{'height':windowHeight+'px'}">
			<scroll-view scroll-y="true" style="width:250rpx">
				<view v-for="(item,index) in topCategoryList" :key="item.id" class="left_body onelineshow"
					@click="activeNum = index" :class="{active_title:activeNum==index}">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true">
				<view class=" margin-top ">
					<view >
						<view class="rowsc">
							<swiper class="publicity_image" :autoplay="true" :interval="3000" :duration="1000" changing-class="" style="height: 170rpx;" v-if="bannerList && bannerList.length !=0">
								<swiper-item v-for="(item,index) in bannerList" :key='index' class="publicity_image">
									<image :src="item.image" class="" style="width: 100%;"></image>
								</swiper-item>
							</swiper>
						</view>
						<view v-for="(item,index) in topCategoryIdList" :key="item.id" @click="">
							<view>
								<view class="text-black text-bold margin-tb-sm margin-left">{{item.name}}</view>
							</view>
								<view class="text-center margin-top-sm" v-for="(item01,index01) in item.tourList"
									:key='item01.id' @click="shopDetail(item01)" >
									<image :src="item01.mainImg" mode="aspectFill" class="shop_image radius-sm"></image>
									<view class=" text-bold text-black text-lg">{{item01.name}}</view>
								</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		get_categoryList,
		get_topCategoryList, //1级分类
		getbannerList, //轮播图
	} from '@/common/path.js'
	export default {
		data() {
			return {
				// 左侧默认选中
				activeNum: 0,
				// #ifdef MP-WEIXIN
				CustomBar: '', //胶囊距离顶部高度
				// #endif

				// #ifdef H5
				CustomBar: 15,
				CustomBarH: '',
				// #endif
				// #ifdef MP-WEIXIN
				CustomBarH: '', //胶囊高度
				// #endif
				is_fixed: false, //默认false不固定

				opacity: 0,

				//屏幕可用窗口高度
				windowHeight: 665,

				topCategoryList: [], //总分类列表
				topCategoryIdList: [], //总下面的子分类下的信息

				topId: '', //默认选中的子分类id

				bannerList: [], //轮播图2
			}
		},
		watch: {
			is_fixed(event) {
				console.log(event);
			},
			opacity(event) {

			},
			activeNum(event) {
				this.topId = this.topCategoryList[event].id //子id 选中
				uni.setStorageSync('switch', this.topId)
			},
			//id变化重新请求
			topId() {
				this.get_categoryList() //2级	
			}

		},
		//生命周期函数
		onReady() {
			uni.setStorageSync('mpShareTitle','芒果乐游团')
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			let system = uni.getSystemInfoSync()
			this.CustomBar = custom.top
			this.CustomBarH = custom.height
			this.windowHeight = system.windowHeight - custom.top - custom.height - 15 - 10
			// #endif
		},
		onLoad(option) {
			// console.log('[传参]', option);
		},
		onShow() {
			let id = uni.getStorageSync('switch')
			console.log('[id]', id);
			this.get_topCategoryList(id) //1级分类
			this.getbannerList() //轮播图
			uni.removeStorage({  key: 'shopId', });
		},
		methods: {
			//轮播图
			getbannerList() {
				let data = {
					type: 1
				}
				this.Http.POST(getbannerList, data)
					.then((res) => {
						if (res.code == -0) {
							console.log('轮播图', res);
							this.bannerList = res.data
						}
					})
			},

			//商品详情
			shopDetail(item) {
				// uni.setStorageSync('shopId',item.id)
				uni.navigateTo({
					url: '/pages/shop/detail?id='+item.id  
				})
			},
			//1级分类
			get_topCategoryList(id) {
				this.Http.GET(get_topCategoryList, {})
					.then((res) => {
						console.log('[1级]', id == '');
						if (res.code == 0) {
							this.topCategoryList = res.data

							if (id == '') {
								this.topId = res.data[0].id //子id 选中
							} else {
								this.topId = id
								res.data.forEach((item, index) => {
									if (item.id == id) {
										this.activeNum = index
									}
								})
								// uni.removeStorage({
								// 	key: 'switch',
								// });
							}
						}
					})
			},
			//获取 二级分类+ 商品列表、
			get_categoryList() {
				let data = {
					pid: this.topId,
					cityCode:uni.getStorageSync('addressId')?uni.getStorageSync('addressId'):uni.getStorageSync('address').id
				}
				this.Http.POST(get_categoryList, JSON.stringify(data))
					.then((res) => {
						console.log('[商品]', res);
						if (res.code == 0) {
							this.topCategoryIdList = res.data
						}
					})
			},

			//下拉刷新触发
			onPullDownRefresh() {
				setTimeout(res => {
					this.$tools.showToast('数据加载成功')
					uni.stopPullDownRefresh();
				}, 1000)
			},

			// 滚动时触发
			onPageScroll(event) {
				this.opacity = event.scrollTop * 0.01
				console.log(this.opacity);
			},
		},
		computed: {},
		components: {}
	}
</script>

<style lang="scss" scoped>
	page {
		background: white;
	}

	.head_input {
		width: 500rpx;
		height: 68rpx;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 34rpx;

		.input_icon {
			width: 30rpx;
			height: 30rpx;
			margin-left: 30rpx;
			margin-right: 10rpx;
		}
	}

	scroll-view {
		height: 100%;
	}

	//选中的标题
	.active_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #363636;
		opacity: 1;
		background-color: white !important;
		border-left: 6rpx solid #38DFB0 !important;
	}

	.left_body {
		width: 161rpx;
		height: 100rpx;
		background: #F9F9F9;
		opacity: 1;
		line-height: 100rpx;
		text-align: center;
		border-left: 6rpx solid #F9F9F9;
	}

	.publicity_image {
		width: 501rpx;
		height: 167rpx;
		background: #EEEEEE;
		opacity: 1;
		border-radius: 15rpx;
	}

	// 右侧商品
	.shop_image {
		width: 501rpx;
		height: 334rpx;
		background: #EEEEEE;
		opacity: 1;
	}
</style>
